<template>
	<view class="my-page-con"> 
	<view class="my-page-content ">
		<view class="my-title">添加卧室照片</view>
		<view class="grey-tips">
			该页面上传图片将用于展示房间详情（房间缩略图默认展示第一张），请上传高清图片，建议像素大于700*400，并确保图片上无水印、无logo、无联系方式。单张图片大小不超过10M。长按图片可拖动排序。如遇到问题，请进入「我的」联系平台客服
		</view>
		<view class="my-s-title">卧室</view>
		<view class="grey-tips mb20">
	       至少上传2张，尽量展示卧室全景，包括床铺、室内卫生间
		</view>
		<view >
		   <!-- <van-uploader :file-list="fileList"  @after-read="afterRead" />
			-->
			<ljs-dragImages
				v-model="imgList"
				@uploadFile="upload"
				>
			</ljs-dragImages>
		
		</view>
		
	</view>
	
	
	
    </view>
		
</template>

<script>
	export default {
		props: {
		    dataItem: Object
		},
		watch: {
			'dataItem': {
				handler(n) {
					this.formData = this.dataItem;
					console.log(this.formData , 'this.formData ');
					this.formData.images.forEach((item, index) =>{
						this.imgList.push(
						  {
							  url:  this.formData.image_urls[index],
							  image_path: item
						  }
						)
					})
				},
				deep: true,
				immediate: true,
			}
		},
		data() {
			return {
				formData: {},
				imgList: []
			}
		},
		
		methods: {
			  upload(files) {
				  let num = 0;
				  let totalNum = 0;
				  uni.showLoading({
				  	title: '上传中',
					  mask: true // 显示透明遮罩
				  });
				  this.imgList.forEach((i,index, arr)=>{
				   if(!i.image_path) {
				  	 totalNum += 1;
				  	const fileUrl =i.url;
				  	const data = [
				  		   { 
				  				name: 'file',
				  				url:  fileUrl
				  		   },
				  		   {
				  			   type: 'tax-bill'
				  		   }
				  	];
				  	this.$uploadFile(...data).then(res =>{
				  		  num +=1;
						this.imgList[index].image_path = res.filepath;
				  		if(num ==  totalNum) {
				  			uni.hideLoading();
				  			this.$forceUpdate();
				  		}
				  	})
				  	}
				  })
			  },
			  nextStep() {
					 if(this.imgList.length < 2) {
						 this.$toast('请至少上传2张卧室照片');
						 return false;
					 }
					  this.formData.image_urls = [];
					  this.formData.images = [];
					  this.imgList.forEach(item => {
						  this.formData.images.push(item.image_path);
						  this.formData.image_urls.push(item.url);
						  
					  });
					 return  this.formData;
			  }
		}
	}
</script>

<style>
	
</style>